<%@ tag language="java" pageEncoding="UTF-8"
	deferredSyntaxAllowedAsLiteral="false" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ attribute name="id" required="true" type="java.lang.String"
	description="唯一标识."%>
<%@ attribute name="jsonData" required="true" type="java.lang.String"
	description="获取数据的设置."%>

<script src="js/libs/charts/echarts-all.js"></script>
<style>
.m-tab-trigger {
	float: left;
	height: 31px;
	margin-bottom: -1px;
}

.m-tab-trigger .trig-item {
	float: left;
	height: 30px;
}

li {
	display: list-item;
	text-align: -webkit-match-parent;
}

.m-tab-trigger .trig-item a {
	display: inline-block;
	padding: 0 10px;
	font-family: "microsoft yahei";
	font-size: 14px;
}

.m-tab-trigger-wrap {
	position: relative;
	line-height: 30px;
	overflow: hidden;
}

#pro-detail-hd {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 2;
}

.m-tab-trigger .trig-item.curr a {
	position: relative;
	height: 35px;
	line-height: 35px;
	margin-top: -6px;
	margin-left: -1px;
	border-left: 1px solid #DEDFDE;
	border-right: 1px solid #DEDFDE;
	background-color: #fff;
}

a {
	color: #666;
}

.itmecurr {
	color: #CC3333;
	text-decoration: underline;
}
</style>

<div id="relateCiTab" class="box ">
	<div class="mt J-detail-tab" id="pro-detail-hd"
		data-fixed="pro-detail-hd-fixed">
		<div class="mt-inner m-tab-trigger-wrap clearfix">
			<ul class="m-tab-trigger" id="tabLiContain">

			</ul>

		</div>
		<div id="${id }_dataArea" style="width:100%;height:220px;"></div>
	</div>
</div>

<script type="text/javascript">
	/**
	 * Created by HanSon on 2016/1/24.
	 */
	function newline(option, number, axis) {

		option['xAxis']['axisLabel'] = {
			interval : 0,
			formatter : function(params) {
				return "";
			}
		}
		return option;
	}
</script>
<script type="text/javascript">
	$(function() {
		init();
	});

	function init() {
		var option = ${jsonData};
		var liStr = "";
		for ( var i = 0; i < option.length; i++) {
			var tabName = option[i].name;
			var url = option[i].url;
			var type = option[i].type;
			liStr += "<li class='ui-switchable-item trig-item'><a id='item_a_" + i + "' href='javascript:void(0);' onclick=\"javascript:${id}_selectTab('" + i + "','" + url + "','" + type + "')\">" + tabName + "</a></li>";
		}
		$("#tabLiContain").append(liStr);
		$("#item_a_0").click();

	}

	function showPieChart(data) {
		var initOption = {

			tooltip : {
				trigger : 'item'
			},
			series : [ {
				type : 'pie',
				itemStyle : {
					normal : {
						label : {
							show : true,
							formatter : '{b} : {c} '
						},
						labelLine : {
							show : true
						}
					}
				}

			} ]
		};
		var myChart = echarts.init(document.getElementById('${id }_dataArea'));
		$.getJSON("app/portal/main/getEgHandleIcd", function(result) {
			initOption.series[0].data = result.series[0].data;
			myChart.setOption(initOption);
		});
	}
	function showBarChart(data,url) {
		var colors = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ];
		var initOption = {
			yAxis : {
			/* type : 'value',
			axisLabel : {
				formatter : '{value} °C'
			},
			splitNumber : 10 */
			},
			interval : 'auto',
			grid : { // 控制图的大小，调整下面这些值就可以，
				x : 40,
				y: 30,
				x2 : 50,
				y2 : 30
			// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
			},
			"xAxis" : [ {
				"data" : [],
				"type" : "category",
				axisLabel : {
					interval : 0,
					formatter : function(params) {
						var newParamsName = "";
						var paramsNameNumber = params.length;
						var provideNumber = 5;
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
						if (paramsNameNumber > provideNumber) {
							for ( var p = 0; p < rowNumber; p++) {
								var tempStr = "";
								var start = p * provideNumber;
								var end = start + provideNumber;
								if (p == rowNumber - 1) {
									tempStr = params.substring(start, paramsNameNumber);
								} else {
									tempStr = params.substring(start, end) + "\n";
								}
								newParamsName += tempStr;
							}
						} else {
							newParamsName = params;
						}
						return newParamsName;
					}
				}
			} ],
			noDataLoadingOption: {
                    text: '暂无数据',
                    effect: 'bubble',
                    effectOption: {
                        effect: {
                          n: 0
                        }
                    }
            },
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c}",
				position:function(p){   //其中p为当前鼠标的位置
                   return [p[0] + 40, p[1] - 40];
                   }
			},
			title : {
				text : ''
			},
			itemStyle : {
				normal : {
					label : {
						show : true
					}
				}
			},
		};
		var myChart = echarts.init(document.getElementById('${id }_dataArea'));
		initOption.series = [ {
			"type" : "bar",
			itemStyle : {
				normal : {
					color : function(params) {
						return colors[params.dataIndex]
					},
					label : {
						show : true,
						position : 'top',
						formatter : '\n{c}'
					}
				}
			}
		} ];
		initOption.xAxis[0].data = data.xAxis[0].data;
		initOption.series[0].data = data.series[0].data;

		var option = newline(initOption, 3, 'xAxis');
		myChart.setOption(option);
	    myChart.on('click', function (params) {
           openListWindow(params.name,url);
        });

	}
	
	function openListWindow(name,url)
	{
	   //
	   var turl="";
	   if(url.indexOf("incident")>-1)
	   {
	     turl="kpi/incident/dataView";
	   }else if(url.indexOf("conf")>-1)
	   {
	       turl="app/portal/main/dataForCiEdit";
	   }
	   
	   var getKeyArr=url.split("/");
	   var key=getKeyArr[getKeyArr.length-1];
	    var tempTitle = "详情";
		var tempUrl = turl+"?fromType=portal&ename="+name+"&key="+key+"&url=1";
		var options = {
			title : tempTitle,
			contentUrl : tempUrl
		};
		isperp.openDialog(options);
	   
	   
	}
	
	function ${id}_selectTab(num, url,type) {
		$("[class='itmecurr']").attr("class", "");
		$("#item_a_" + num).attr("class", "itmecurr");
		$("#${id }_dataArea").html("");
		
		$.ajax({
		   url:url,
		   success:function(data)
		   {
		      switch(type)
		      {
		          case "pie":
		             showPieChart(data)
		          break;
		          case "bar":
		            showBarChart(data,url)
		          break;
		          default:
		          break;
		      }
		   }
		});	
	}
</script>